<script setup lang="ts">
import ObsImage from '#/components/obsImage.vue';
import CustomTable from '#/components/custom-table.vue';
  
const props = defineProps({
  certificateContent: {
    type: Object,
    required: true
  },
  setDisabled: {
    type: Function,
    default: () => false
  },
  toIntro: {
    type: Function,
    default: () => { }
  }
})

// 获取文字样式
const getTextStyle = (config: any) => {
  return {
    fontSize: `${config.fontSize || 12}px`,
    color: config.fontColor || '#000000',
    fontWeight: config.fontBold ? 'bold' : 'normal',
    fontStyle: config.italic ? 'italic' : 'normal',
    textDecoration: config.underline ? 'underline' : 'none',
    lineHeight: config.fontSize ? `${config.fontSize + 8}px` : '20px'
  }
}

// 处理按钮点击
const handleButtonClick = (item: any) => {
  if (item.buttonType === 'link' && item.buttonLink) {
    window.open(item.buttonLink, '_blank')
  } else if (item.buttonType === 'func') {
    // 处理功能按钮
    props.toIntro(item.buttonFunc)
  }
}

const btnDisabled = (item: any) => {
  const disabled = props.setDisabled(item)
  return disabled
}

</script>
<template>
  <div class="w-full bg-[#fff] rounded-[16px] p-[24px]">
    <div>
      <!-- 动态渲染证书内容配置 -->
      <div v-for="(item, index) in props.certificateContent.certificateContentConfigs" :key="item.id"
        class="pt-[20px] pb-[20px] first:pt-0 last:mb-0 last:pb-0"
        :class="{ 'border-b border-gray-200': index < props.certificateContent.certificateContentConfigs.length - 1 }">
        <!-- 图标 -->
        <div class="flex items-center">
          <div
            class="flex-none w-[64px] h-[64px] rounded-full bg-blue-100 flex items-center justify-center shadow-sm overflow-hidden mr-[20px]">
            <!-- 如果有自定义图标，使用 ObsImage 组件 -->
            <ObsImage v-if="item.icon" :src="item.icon" :showPreview="false"
              :imgStyle="{ width: '64px', height: '64px', objectFit: 'contain' }" />
          </div>

          <!-- 内容 -->
          <div class="flex-1 pr-[20px]">
            <!-- 标题 -->
            <h3 class="text-lg font-bold text-gray-900 mb-2" :style="getTextStyle(item.titleTextFormatConfigs)">
              {{ item.title }}
            </h3>

            <!-- 描述 -->
            <p class="text-gray-700 mb-3 whitespace-pre-line break-words" :style="getTextStyle(item.titleDescTextFormatConfigs)">
              {{ item.titleDesc }}
            </p>

          </div>
          <!-- 按钮 -->
          <div v-if="item.showButton" class="flex-none w-auto h-auto rounded-[4px]">
            <el-button @click="handleButtonClick(item)" :disabled="btnDisabled(item)">
              {{ item.buttonTxt }}
            </el-button>
          </div>
        </div>
        <div v-if="item.insertTable" class="flex items-center pt-[20px] pl-[84px]">
          <CustomTable :tableConfig="item.tableConfig" :readOnly="true" />
        </div>
      </div>

    </div>
  </div>
</template>

<style lang="scss" scoped>
.space-y-4>*+* {
  margin-top: 1rem;
}

.space-x-4>*+* {
  margin-left: 1rem;
}

.flex-none {
  flex: none;
}

.flex-1 {
  flex: 1 1 0%;
}

.w-12 {
  width: 3rem;
}

.h-12 {
  height: 3rem;
}

.w-6 {
  width: 1.5rem;
}

.h-6 {
  height: 1.5rem;
}

.w-4 {
  width: 1rem;
}

.h-4 {
  height: 1rem;
}

.rounded-full {
  border-radius: 9999px;
}

.bg-blue-100 {
  background-color: #dbeafe;
}

.bg-blue-500 {
  background-color: #3b82f6;
}

.text-white {
  color: #ffffff;
}

.text-gray-900 {
  color: #111827;
}

.text-gray-700 {
  color: #374151;
}

.text-red-500 {
  color: #ef4444;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.font-bold {
  font-weight: 700;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.border-b {
  border-bottom-width: 1px;
}

.border-gray-200 {
  border-color: #e5e7eb;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.hover\:bg-blue-600:hover {
  background-color: #2563eb;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.flex {
  display: flex;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}
</style>
